<template>
  <div class="dashboard-container">
    <h2>{{ type === "add" ? "新增房屋" : "修改房屋信息" }}</h2>
    <div class="dashboard-text">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="公告标题：" prop="title">
          <el-input
            v-model="ruleForm.title"
            placeholder="请输入公告标题"
            maxlength="20"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="公告内容：" prop="content">
          <el-input
            v-model="ruleForm.content"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 10 }"
            placeholder="请输入公告内容"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="状态：" prop="state">
          <el-switch
            v-model="ruleForm.state"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSaveContent">保存</el-button>
          <el-button @click="$router.back()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  createNoticeDetail,
  getNoticeDetail,
  updateNoticeDetail
} from '@/api/notice'
export default {
  name: 'Dashboard',
  components: {},
  data() {
    return {
      action: process.env.VUE_APP_BASE_UPLOAD,
      ruleForm: {
        state: 1,
        title: '',
        content: ''
      },
      rules: {
        title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
        content: [
          { required: true, message: '请输入公告内容', trigger: 'blur' }
        ]
      },
      tableData: [],
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      }
    }
  },
  computed: {
    type() {
      return this.$route.query.type
    }
  },
  created() {
    this.handleGetDetail()
  },
  methods: {
    async handleGetDetail() {
      if (!this.$route.query.id) return
      const res = await getNoticeDetail({
        id: this.$route.query.id
      })
      if (res.code === 200) {
        res.data.price = (res.data.price / 100).toFixed(2)
        this.ruleForm = Object.assign({}, res.data)
      }
    },
    handleSaveContent() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          const form = JSON.parse(JSON.stringify(this.ruleForm))
          const api =
            this.type === 'add' ? createNoticeDetail : updateNoticeDetail
          const res = await api({
            ...form
          })
          if (res.data && res.code === 200) {
            this.$message.success(
              `${this.type === 'add' ? '新建' : '保存'}成功`
            )
            this.$router.back()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    margin-bottom: 30px;
  }
}
.el-input,
.el-textarea {
  width: 300px;
}
.box {
}
.box-card {
  display: inline-block;
  width: 32%;
  margin-right: 1%;
  .header {
    display: flex;
    align-items: flex-start;
  }
}
.checkbox-group {
  width: 380px;
}
.scope-box {
  .scope-item {
    margin-right: 1%;
    display: inline-block;
    width: 20%;
  }
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-upload--picture-card {
    display: inline-block !important;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
